<template>
  <div class="reference-table-example">
    <h2>参考资料表格组件示例</h2>
    <p>
      这是一个独立的参考资料表格组件示例，展示了如何使用 ReferenceTable 组件。
    </p>

    <ReferenceTable
      ref="referenceTableRef"
      :auto-load="true"
      :show-upload="true"
      @file-selected="handleFileSelected"
      @file-uploaded="handleFileUploaded"
      @file-deleted="handleFileDeleted"
    />

    <div v-if="selectedFiles.length > 0" class="selected-files">
      <h3>已选择的文件：</h3>
      <ul>
        <li v-for="file in selectedFiles" :key="file.id">
          {{ file.fileName }} ({{ file.fileType }})
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref } from "vue";
  import ReferenceTable from "./ReferenceTable.vue";
  import type { ReferenceFile } from "@/api/reference";

  const referenceTableRef = ref();
  const selectedFiles = ref<ReferenceFile[]>([]);

  const handleFileSelected = (files: ReferenceFile[]) => {
    selectedFiles.value = files;
    console.log("选中的文件:", files);
  };

  const handleFileUploaded = (file: ReferenceFile) => {
    console.log("文件上传成功:", file);
    // 可以在这里处理文件上传成功后的逻辑
  };

  const handleFileDeleted = (file: ReferenceFile) => {
    console.log("文件删除成功:", file);
    // 可以在这里处理文件删除成功后的逻辑
  };

  // 暴露方法给父组件
  defineExpose({
    refreshTable: () => referenceTableRef.value?.refresh(),
  });
</script>

<style scoped lang="scss">
  .reference-table-example {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
  }

  .selected-files {
    margin-top: 20px;
    padding: 16px;
    background: #f5f7fa;
    border-radius: 8px;

    h3 {
      margin: 0 0 12px 0;
      color: #333;
    }

    ul {
      margin: 0;
      padding-left: 20px;

      li {
        margin-bottom: 4px;
        color: #666;
      }
    }
  }
</style>
